<template>
	<view>
		<!-- #ifdef APP-PLUS -->  
		<view class="status_bar">  
			<view class="top_view"></view>  
		</view>
		<!-- #endif --> 
		<view class="full">
			<!-- 搜索 -->
			<view class="search">
				<uni-icons class="icon" type="search" color="#9c9c9c" />
				<uni-icons class="icon_clear" type="clear" color="#9c9c9c"
					v-if="iconClear" @click="clearHandle(1)" />
				<input class="input" type="text" v-model="search" confirm-type="search"
				 :placeholder="inputP" @focus="focusHandle(true)" @blur="focusHandle()"
					@input="inputHandle" @confirm="confirmHandle"/>
				<text class="clear" @click="clearHandle(2)">取消</text>
			</view>
			<!-- 默认 -->
			<template v-if="bodyId==1">
				<!-- 历史记录-搜索 -->
				<view class="search-his">
					<c-cell label="历史记录" border="" lStyle="font-weight: bold;">
						<template #iconR>
							<view clear @click="clearHandle(3)">
								<uni-icons type="trash" size="14" />
								<text>清空</text>
							</view>
						</template>
					</c-cell>
					<view class="his-list">
						<view class="item" v-for="(item,index) in hisList"
							:key="index"><text>{{item}}</text></view>
					</view>
				</view>
				<!-- 热门搜索 -->
				<view class="search-hot">
					<c-cell label="全网热门搜索" border="" :lStyle="hotStyle" />
					<view class="item-hot" v-for="(item, index) in hotList"
						:key="index">
						<text tag :style="index|color_f">{{index + 1}}</text>
						<text>{{item}}</text>
					</view>
				</view>
			</template>
			
			<!-- 搜索可选-列表 -->
			<template v-else-if="bodyId==2">
				<view v-for="(item, index) in searchList"
				:key="index" class="search-list">
					<rich-text :nodes="item|txt_f(search)" @click="searchHandle(item)" />
				</view>
			</template>
			
			<!-- 搜索结果-列表 mode="aspectFit" -->
			<template v-else>
				<view class="valid-list" v-for="(item, index) in resList"
					:key="index">
					<image img :src="item.img"></image>
					<view class="v-right">
						<view name><text>{{item.name}}</text></view>
						<view txt><text>地区：{{item.region}}</text></view>
						<view txt><text>来源：{{item.source}}</text></view>
						<button button type="primary" size="mini" @click="playHandle(item)">
							<icons class="play" type="video" color="#fff"/>播放
						</button>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bodyId: 1, // 1 默认 2 搜索可选 3 搜索结果
				// 热门搜索		历史搜索			搜索值
				hotList: [], hisList: [], search: '', inputP: '',
				// 搜索缓存key						清除图标
				localKey: 'search_key', iconClear: false,
				// 搜索可选列表	搜索结果
				searchList: [], resList: []
			}
		},
		computed:{
			hotStyle() { // 热门搜索-css
				return 'font-weight: bold;'
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			// 初始化
			init() {
				// 获取缓存(历史)搜索记录
				const hisList = uni.getStorageSync(this.localKey) || []
				this.hisList = hisList.reverse()
				// 获取热门搜索记录
				this.hotList = [
					'花木兰', '在劫难逃', '从邪恶中拯救我',
					'德云社笑社', '黑袍纠结对 第二季', '我在时间尽头等你',
					'荞麦疯长', '异星灾灭', '信条'
				]
				this.inputP = this.hotList[0]
			},
			// 焦点回调
			focusHandle(bool) {
				this.inputP = bool ? '' : this.hotList[0]
			},
			// 搜索监听-回调
			inputHandle() {
				this.iconClear = !!this.search
				this.searchList = []
				!this.search && (this.bodyId = 1)
				console.log(this.search)
				// 搜索可选项 -- 远程
				if (!!this.search) {
					this.bodyId = 2
					this.searchList = [
						'军人', '军人2', '军人3', '军人4',
						'军人5', '军人6', '军人7', '军人8',
						'军人9', '军人10', '军人11', '军人12',
						'军人9', '军人10', '军人11', '军人12',
						'军人9', '军人10', '军人11', '军人12',
						'军人13', '军人14'
					]
				}
			},
			// 搜索可选项-选择
			searchHandle(val) {
				this.search = val
				this.confirmHandle()
			},
			// 取消回调
			clearHandle(type) {
				switch (type) {
					case 1: // 清除内容
						this.search = ''
						this.iconClear = false
						this.bodyId = 1
						break
					case 2: { // 返回上一页
						const pages = getCurrentPages()
						if (pages.length < 2) {
							uni.switchTab({
								url:'/pages/tabs/find/index'
							})
						} else {
							uni.navigateBack()
						}
						break
					}
					case 3: // 清除搜索记录
						if(uni.getStorageSync(this.localKey)) {
							uni.showModal({
								content: '确定清除?',
								success: (res) => {
									if (res.confirm) {
										uni.removeStorageSync(this.localKey)
										this.hisList = []
									}
								}
							})
						}
						break
				}
			},
			// 提交回调
			confirmHandle() {
				const { search:sval } = this
				if (sval) {
					console.log('提交')
					this.bodyId = 1
					this.setlocalStorage() // 保存搜索结果
					uni.showToast({
						title:sval
					})
					this.resList = [
						{
							name: '军火贩', img: '/static/img/roll/1.jpg', url: '',
							region: '美国/东埔寨', source: '网络'
						},
						{
							name: '军人的妻子', img: '/static/img/roll/1.jpg', url: '',
							region: '英国', source: '网络'
						},
						{
							name: '军鸡', img: '/static/img/roll/1.jpg', url: '',
							region: '香港', source: '网络'
						}
					]
					this.bodyId = 3
				}
			},
			// 播放视频
			playHandle(row) {
				console.log(row)
				uni.showToast({
					title:'播放视频: ' + row.name,
					icon: 'none'
				})
			},
			// 缓存搜索结果
			setlocalStorage() {
				const { search:sval } = this
				let localSearchs = uni.getStorageSync(this.localKey)
				if (localSearchs && localSearchs.length) {
					const bool = !localSearchs.includes(sval)
					if (bool) {
						localSearchs.length == 10 && localSearchs.shift()
						localSearchs.push(sval)
					}
				} else {
					localSearchs = [sval]
				}
				// 放入|更新缓存
				uni.setStorage({
					key:this.localKey,
					data: localSearchs
				})
				this.hisList = localSearchs.reverse()
			}
		},
		filters: {
			color_f(ind) { // 热门搜索-tag color
				ind = ind > 3 ? 3 : ind
				const c_str = ['#fb5159', '#fbbf51', '#55aaff', '#4b4b4b'][ind]
				return `background: ${c_str};`
			},
			// 特殊文字变色
			txt_f(val, search) {
				const h = '<a style="color:#416bcf">$1</a>'
				return val.replace(new RegExp(`(${search})`,'g'),h)
			}
		}
	}
</script>

<style lang="scss" scoped>
.status_bar {  
	height: var(--status-bar-height);  
	width: 100%;  
	background-color: #F8F8F8;  
}  
.top_view {  
	height: var(--status-bar-height);  
	width: 100%;  
	position: fixed;
	background-color: #F8F8F8;  
	top: 0;  
	z-index: 999;  
}
// 搜索
.search{
	/* #ifdef APP-PLUS */
	position: fixed;
	/* #endif */
	position: sticky;
	top: var(--status-bar-height);
	width: 100%;
	z-index: 9999;
	background: #fff;
	padding: 10rpx 0;
	border-bottom: 1px solid #f3f3f3;
	.input{
		height: 30px;
		font-size: 12px;
		padding: 0 50rpx;
		background: #f3f3f3;
		border-radius: 20px;
		margin: 0 80rpx 0 20rpx;
		.input-placeholder{
			color: #909090;
		}
	}
	.icon{
		position: absolute;
		top: 13px;
		left: 35rpx;
		font-weight: bold;
	}
	.icon_clear{
		position: absolute;
		top: 13px;
		right: 100rpx;
	}
	.clear{
		position: absolute;
		top: 13px;
		font-size: 15px;
		right: 20rpx;
	}
}
// 搜索-历史
.search-his{
	/* #ifdef APP-PLUS */
	margin-top: calc(var(--status-bar-height) + 25px);
	/* #endif */
	line-height: 22px;
	// border: 1px solid;
	[clear]{
		float: right;
		font-size: 14px;
		display: inline-block;
	}
	.his-list{
		margin-left: 20rpx;
		.item{
			width: calc(50% - 20rpx);
			display: inline-block;
			font-size: 14px;
			line-height: 28px;
			border-radius: 20px;
			text-align: center;
			background: #f3f3f3;
			margin: 0 20rpx 13rpx 0;
		}
	}
}
// 搜索-热门
.search-hot{
	.item-hot{
		width: calc( 50% - 20rpx );
		font-size: 14px;
		display: inline-block;
		padding: 0 0 10px 20rpx;
		[tag]{
			color: #fff;
			font-size: 12px;
			padding: 3px 4px 0;
			margin-right: 10px;
		}
	}
}
// 搜索可选-列表
.search-list{
	&:nth-child(2){
		/* #ifdef APP-PLUS */
		margin-top: calc(var(--status-bar-height) + 25px);
		/* #endif */
	}
	font-size: 14px;
	padding: 20rpx 40rpx;
}
// 结果-视频列表
.valid-list{
	&:nth-child(2){
		/* #ifdef APP-PLUS */
		margin-top: calc(var(--status-bar-height) + 25px);
		/* #endif */
	}
	margin-bottom: 20px;
	padding-left: 20rpx;
	[img]{
		width: 200rpx;
		height: 165px;
	}
	.v-right{
		width: calc(100% - 220rpx);
		position: relative;
		height: 165px;
		font-size: 12px;
		display: inline-block;
		padding-left: 20rpx;
		vertical-align: top;
		[name]{
			font-weight: bold;
			font-size: 18px;
			margin-bottom: 40px;
		}
		[txt]{
			margin-bottom: 10px;
		}
		[button]{
			bottom: 0;
			position: absolute;
	    border-radius: 20px;		
		}
		.play{ margin-right: 5px;}
	}
}
</style>
